<template>
  <div class="use_situation">
    <section>
      <el-table v-loading="loading" :data="tableData" border>
          <el-table-column label="车主" prop="nickname" align="center"></el-table-column>
          <el-table-column label="停车券" prop="ticketName" align="center"></el-table-column>
          <el-table-column label="商户" prop="shopName" align="center"></el-table-column>
          <el-table-column label="车场名称" prop="parkName" align="center"></el-table-column>
          <el-table-column label="支付时间" prop="payTime" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
             <el-button size="mini" type="primary" @click="seeOrder(scope.row)">查询订单</el-button>
            </template>
        </el-table-column>
      </el-table>
    </section>


    <footer>
      <el-pagination
        :current-page="searchForm.currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="searchForm.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top:10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>


  </div>
</template>

<script>
  export default  {
    data() {
      return {
        searchForm: {
          currentPage: 1,
          pageSize: 10
        },
        tableData: [],
        total: 0,
        loading: true
      }
    },

    mounted() {
      this.getUsedTicket();
    },

    methods: {
      getUsedTicket() {
        this.loading = true;
        this.$axios({
          method: 'get',
          url: '/system/cust-ticket/get-used-shop-park-ticket',
          params: this.searchForm
        }).then((res) => {
          if(res.code == 200) {
            this.tableData = res.data.records;
            this.total = res.data.total;
            this.loading = false;
          }
        })
      },

      seeOrder(row) {
        if(row.orderCode) {
          this.$router.push({path:'/inOutPark/inOutPark',query:{code:row.orderCode}})
        } else {
          this.$message.warning('未查询到订单号')
        }
      },

      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getUsedTicket();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchForm.currentPage = val;
        this.getUsedTicket();
      }
    }
  }
</script>

<style scoped>
  .use_situation {
    padding: 20px;
  }

  footer {
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: 0;
  }

  section {

  }




</style>
